<!-- 护工管理 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px;">
      <el-form :model="form" label-width="auto" :inline=true>
        <el-form-item label="护工姓名:">
          <el-input v-model="form.name" clearable />
        </el-form-item>
        <el-form-item label="联系方式:">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="所属岗位:">
          <el-select v-model="form.roleId" clearable placeholder="请选择" style="width: 240px;">
            <el-option v-for="item in roleList" :key="item.id" :label="item.name"
              :value="item.id as unknown as string" />
          </el-select>
        </el-form-item>
        <el-form-item label="老人姓名:">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="search">查询</el-button>
          <el-button :icon="Refresh" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px;">
      <el-button type="success" @click="add"><el-icon class="icon">
          <Plus />
        </el-icon> 新增员工</el-button>
      <el-button type="danger" @click="delAll"><el-icon class="icon">
          <Delete />
        </el-icon>批量删除</el-button>


      <el-table :data="tableData.list" ref="multipleTableRef" @selection-change="handleSelectionChange"
        style="width: 100%; margin-top: 10px">
        <el-table-column type="selection" width="55" />
        <el-table-column property="id" label="序号" />
        <el-table-column property="photo" label="头像">
          <template #default="scope">
            <el-image style="width: 50px; height: 50px" :src="imgUrl + scope.row.photo" :zoom-rate="1.2" :max-scale="7"
              :min-scale="0.2" :initial-index="4" fit="cover" />
          </template>
        </el-table-column>
        <el-table-column property="name" label="姓名" />
        <el-table-column property="mobile" label="联系方式" />
        <el-table-column property="roles" label="所属岗位">
          <template #default="scope">
            {{ scope.row.roles.map((item: role) => item.name).join(' ') }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button :icon="Delete" text size="small" class="btn" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination v-model:current-page="form.page" v-model:page-size="form.pageSize"
          :page-sizes="[10, 20, 50, 100, 300]" small background layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>


    <!-- 添加 -->
    <CarerDialog v-if="dialogVisible" @close="handelClose"></CarerDialog>

  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Search, Refresh } from '@element-plus/icons-vue'
import { Delete } from '@element-plus/icons-vue'
import CarerDialog from '@/components/config/carerAdd.vue'
import { role, staffParams } from '@/api/personel/staff/type'
import { staffList, staffCarerDel, staffDelAll } from '@/api/personel/staff/staff'
import { RoleList } from '@/api/personel/position/position'
import { listData, listParams } from '@/api/personel/position/type'

const dialogVisible = ref(false)

// 图片根路径
const imgUrl = ref('')
imgUrl.value = import.meta.env.VITE_IMG_URL

const form = reactive<staffParams>({
  page: 1,
  pageSize: 10,
  name: '',
  mobile: '',
  idCard: '',
  departmentId: undefined,
  roleId: undefined,
  carer: 1,
})

const tableData = reactive({
  list: [] as any[],
  total: 0,
})
// 护工列表
const getList = async () => {
  let res = await staffList(form)
  tableData.list = res.list
  tableData.total = res.counts

}

// 添加
const add = () => {
  tableData.list
  dialogVisible.value = true

}

// 岗位列表
const RoleParams = reactive<listParams>({
  page: 1,
  pageSize: 1000
})
const roleList = ref<listData[]>([])
const getRoleList = async () => {
  let res = await RoleList(RoleParams)
  roleList.value = res.list
}

// 删除
const del = async (id: number) => {
  ElMessageBox.confirm(
    '确认删除该条数据吗?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      await staffCarerDel(id)
      // console.log('删除', res);
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getList()

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除',
      })
    })

}

// 批量删除
const multipleSelection = ref<number[]>([])
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val.map(item => item.id)
  // console.log(multipleSelection.value);
}
const delAll = async () => {
  if (!multipleSelection.value.length) {
    ElMessage.error('亲，请选择要删除的数据呢');
    return;
  }
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      let res = await staffDelAll(multipleSelection.value)
      ElMessage.success('删除成功');
      getList()


    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除!'
      });
    });
}

// 搜索
const search = () => {
  form.page = 1
  getList()
}

// 重置
const reset = () => {
  form.name = ''
  form.mobile = ''
  form.roleId = undefined
  getList()
}

// 分页
const handleSizeChange = (val: number) => {
  form.pageSize = val
  getList()
}
const handleCurrentChange = (val: number) => {
  form.page = val
  getList()

}

// 关闭弹框  
const handelClose = () => {
  dialogVisible.value = false
  getList()

}

onMounted(() => {
  getList()
  getRoleList()
})

</script>

<style lang="less" scoped>
.btn {
  width: 40px;
  color: rgb(245, 108, 127);
  border: none
}

.demo-pagination-block {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
